<!DOCTYPE HTML>
<html>
<head>
<style>
body > div { border:1px solid black; margin:1em; }
div:first-line { color:green; }
div:first-letter { color:lime; }
.f:first-letter { float:left; }
</style>
<script>
function setH(id) {
  document.getElementById(id).firstChild.data = "H";
}
function insertSpan(id) {
  var d = document.getElementById(id);
  var span = document.createElement("span");
  span.textContent = "Hello";
  d.insertBefore(span, d.firstChild);
}
function loaded() {
  setH("d1");
  setH("d2");
  insertSpan("d3");
  insertSpan("d4");
}
</script>
</head>
<body onload="loaded()">
  <div>  Hello<br>Kitty</div>
  <div class="f">  <span>Hello</span><br>Kitty</div>
  <div id="d1">  <span>ello</span><br>Kitty</div>
  <div id="d2" class="f">  <span>ello</span><br>Kitty</div>
  <div id="d3">  <span>Hello</span><br>Kitty</div>
  <div id="d4" class="f">  <span>Hello</span><br>Kitty</div>
</body>
</html>
